<script>
import config from '../../config'
import Popover from '../Popover.vue'

export default {
  name: 'ProductItem',

  props: {
    product: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      cdn: config.cdn
    }
  },

  components: {
    Popover
  }
}
</script>

<template>
<div class="item" style="overflow: visible;">
  <router-link :to="'/products/' + product.id"><img class="item-image" :src="`${cdn}/${product.cover}-qrcode`"></router-link>
  <div class="item-body">
    <h3>{{ product.name }}</h3>
    <p>
      <template v-if="product.tags">
        <label v-for="(tag, key) in product.tags" :class="'tag tag-' + key">{{ tag.name }}</label>
      </template>
    </p>
    <p class="description">{{ product.summary }}</p>
    <p class="amount">
      <span>&yen;&nbsp;{{ product.currentOffer / 100 }}</span>&nbsp;&nbsp;&nbsp;<span class="before">&yen;&nbsp;{{ product.basicOffer / 100 }}</span>
    </p>
    <router-link :to="'/products/' + product.id" class="qrcode-btn">查看详情</router-link>
    <!-- <a :id="'qrode-' + product.id + '-btn'" class="qrcode-btn" :href="'#qrode-' + product.id" rel="modal:open">点击购买</a> -->
    <!-- <popover extra-class="popover-bottom-arrow" :extra-top="-60" :exact-left="10">
      <button slot="trigger" class="qrcode-btn">点击购买</button>

      <div slot="popover" >
        <img :src="`${cdn}/${product.qrcode}-qrcode`" style="width: 180px; height: 180px;">
        <p style="text-align: center; font-size: 18px; color: #333; margin: 10px 0 0;">
          <span style="font-weight: bolder;">微信扫一扫</span> 查看详情
        </p>
      </div>
    </popover> -->
  </div>
</div>
</template>